<template>
  <div class="default-layout-container">
    <div class="header-container">
      <div class="logo-container">
        <img src="~/assets/logo.png" alt="logo" />
      </div>
      <div
        v-for="link in pathList"
        :key="link.name"
        class="link-btn"
        :class="{ active: activeLink === link.name }"
        @click="handleClick(link)"
      >
        {{ link.name }}
      </div>
      <!-- 登录状态 -->
      <div class="user-info-container">
        <div class="user-info-wrapper">
          <div class="user-avatar">
            <img src="~/assets/role/bolatu_avatar.png" alt="avatar" />
          </div>
          <div class="user-name">理想国</div>
        </div>
        <div class="log-out-btn">退出登录</div>
      </div>
    </div>
    <div class="content-container">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
// ------------ import ------------
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";

// ------------ type ------------
type path = {
  name: string;
  path: string;
};

// ------------ data ------------
const activeLink = ref("首页");

const router = useRouter();

const pathList = reactive([
  {
    name: "首页",
    path: "/",
  },
  {
    name: "模型广场",
    path: "/modelSquare",
  },
  {
    name: "辩论擂台",
    path: "/debateArena",
  },
  {
    name: "我的对话",
    path: "/myChat",
  },
]);

// ------------ function ------------
const handleClick = (link: path) => {
  activeLink.value = link.name;
  router.push(link.path);
};
</script>

<style lang="scss">
.default-layout-container {
  display: flex;
  flex-direction: column;
}

.header-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
  padding: 10px 40px;
  background-color: #fcfcff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;

  .logo-container {
    margin-right: auto;
    height: 50px;
    cursor: pointer;

    img {
      height: 100%;
    }
  }

  .link-btn {
    margin-left: 20px;
    font-size: 16px;
    color: #2029459e;
    font-weight: bold;
    cursor: pointer;
    background-color: transparent;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    &:hover {
      background-color: #eff0f8;
    }
    &.active {
      color: #080d1ee6;
    }
  }

  // 登录状态
  .user-info-container {
    display: flex;
    align-items: center;
    margin-left: 100px;
    width: 300px;
    gap: 20px;

    .user-info-wrapper {
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 4px 8px;
      border-radius: 6px;
      width: 100%;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background-color: #d6d8ec;
      }
    }

    // 用户头像
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 100%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    // 用户姓名
    .user-name {
      font-size: 18px;
      font-weight: bold;
      color: #080d1ee6;
    }

    // 退出登录按钮
    .log-out-btn {
      font-size: 14px;
      font-weight: bold;
      color: #fff;
      background-color: #1d2234;
      padding: 10px 20px;
      flex-shrink: 0;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background-color: #080d1e;
      }
    }
  }
}
.content-container {
  margin-top: 60px;
}
</style>
